<template>
	<div class="login">
    <div class="login-container">
      <div class="form-head">领航工作室</div>
      <el-form
        label-position="right"
        label-width="auto"
        :model="formData"
      >
        <el-form-item label="账号">
          <el-input v-model="formData.account" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" show-password v-model="formData.password" />
        </el-form-item>
        <div class="login-row">
          <el-button @click="formSubmit">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { post, getCid, setTokenFactor } from '../../utils/common/api'
import { getUser, resetUser } from '../../utils/user'
import { hashPassword } from '../../utils/user'

export default {
  data() {
    return {
      formData: {
        account: '',
        password: ''
      }
    }
  },

  methods: {
    formSubmit() {
      var that = this
      post('/user/login', {
        account: that.formData.account,
        password: hashPassword(that.formData.password),
        cid: getCid()
      }).then(function(res) {
        console.log(res.token_factor)
        setTokenFactor(res.token_factor)
        resetUser()
        getUser(function(user) {
          console.log(user)
          ElNotification({
            title: '登录成功',
            message: `${user.name} (${user.id}) 欢迎您！`,
            type: 'success',
            position: 'bottom-right',
          })
          that.$router.push({path: `/user/${user.id}`})
        })
      })
    }
  }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-container {
  padding: 48px 80px;
  border-radius: 24px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);
}

.form-head {
  font-size: 30px;
  margin-bottom: 32px;
}

.login-row {
  margin-top: 32px;
}
</style>
